<template>
    <!--pages/login/login.wxml-->
    <div class='login-box'>
        <div class='login-banner'>调度端登录</div>
        <div class='form'>
            <van-cell-group>
                <van-field
                        v-model="phone"
                        placeholder="请输入用户名"
                        maxLength="11"
                        label="用户名"
                />
                <van-field
                        v-model="password"
                        type="password"
                        maxLength="16"
                        label="密码"
                        placeholder="请输入密码"
                />
            </van-cell-group>
        </div>
        <div class='form'>
            <van-button id="login-btn" :loading="isLoading" type="primary" size="large" @click="login">登录</van-button>
        </div>
    </div>
</template>

<script>
    import {Notify, Field, Button, CellGroup} from 'vant';

    export default {
        name: 'login',
        data() {
            return {
                phone: '',
                password: '',
                isLoading: false
            }
        },
        methods: {
            login() {
                if (!(/^1[34578]\d{9}$/.test(this.phone))) {
                    Notify({
                        message: "手机号码有误，请重新输入",
                        duration: 1000,
                    });
                    return false;
                }
                if (!this.password || this.password.length < 3) {
                    Notify({
                        message: "请输入3-16位密码",
                        duration: 1000,
                    });
                    return false;
                }
                this.isLoading = true;
                this.$http.post('/user/session', {
                    phone: this.phone,
                    password: this.password
                }).then((response) => {
                        this.isLoading = false;
                        // console.info('response',response);
                        Notify({
                            message: '登录成功！',
                            duration: 1000,
                            background: '#1989fa'
                        });
                        sessionStorage.setItem("token", response.data.data['api_token']);
                        sessionStorage.setItem("name", response.data.data['name']);
                        sessionStorage.setItem("cityId", '1');
                        this.$router.push({path: "/index/index"});
                    })
                    .catch((error) => {
                        this.isLoading = false;
                        if (error.response && error.response.data.msg) {
                            Notify({
                                message: error.response.data.msg,
                                duration: 1000
                            });
                        } else {
                            // Notify({
                            //     message: error.msg || '请求错误',
                            //     duration: 1000,
                            // });
                        }
                    });
            }
        },
        components: {
            [Field.name]: Field,
            [Notify.name]: Notify,
            [Button.name]: Button,
            [CellGroup.name]: CellGroup,
        }
    }
</script>

<style scoped lang="less">
    /* pages/login/login.wxss */
    #login-box {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        font-size: .32rem;
        font-family: PingFangSC-Regular;
        font-weight: 400;
    }

    .login-banner {
        height: 40vh;
        line-height: 40vh;
        color: #fff;
        font-size: .28rem;
        text-align: center;
        text-shadow: 0 0 4px #333;
        background-color: #108EE9;
    }

    /*表单相关  */
    .form {
        padding: 0 .2rem;
    }

    #login-btn {
        margin: .4rem auto .18rem;
        background-color: #108EE9;
        color: #fff;
        text-shadow: 0 0 4px #333;
    }
</style>
